<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>销售</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<script src="/js/echarts.min.js"></script>
<body>
<style>
    body {
        background-color: white;
    }

    .dddd {
        display: inline-block;
        width: 48%;
        margin-left: 18px;
    }

    #main {
        float: left;
    }

    #zhexian {
        float: right;
    }

    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
<div id="app">
    <el-header style="margin-top: 10px;margin-bottom: 10px">
        <template>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content">
                        <el-card shadow="hover">
                            <span>
                                <i class="el-icon-position" style="color: #0F75FF"></i>
                            </span>
                            本月:{{bdata}}
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content">
                        <el-card shadow="hover">
                            <span>
                                <i class="el-icon-position" style="color: #0F75FF"></i>
                            </span>
                            总数量:{{count}}
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content">
                        <el-card shadow="hover">
                             <span>
                                <i class="el-icon-shopping-cart-full" style="color: #0F75FF"></i>
                            </span>
                            采购数量最高零件->:{{maxValueName}}
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content">
                        <el-card shadow="hover">
                            <span>
                                <i class="el-icon-shopping-cart-full" style="color: #0F75FF"></i>
                            </span>
                            采购数量最低零件->:{{minValueName}}
                        </el-card>
                    </div>
                </el-col>
            </el-row>
        </template>
    </el-header>
    <el-col class="dddd">
        <el-card shadow="hover">
            <div id="main" style="width: 400px; height: 400px; margin-right: 20px;"></div>
        </el-card>
    </el-col>
    <el-col class="dddd">
        <el-card shadow="hover">
            <div id="zhexian" style="width: 600px; height: 400px; margin-right: 20px;"></div>
        </el-card>
    </el-col>
</div>


<script>
    new Vue({
        el: "#app",
        data: {
            bdata: '',
            count:'',
            minValueName:'',
            maxValueName:''
        },
        methods: {
            yuan() {
                axios.get("/pur/tong")
                    .then(({data}) => {
                        const f = data.map(item => ({name: item.name, value: item.value}))
                        data.forEach(item => {
                            this.bdata = item.name;
                        })
                        var myChart = echarts.init(document.getElementById("main"));
                        option = {
                            title: {
                                text: '月销售订单统计对比图',
                                subtext: 'Fake Data',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                left: 'center',
                                top: 'bottom',
                                data: data.data1
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: {show: true},
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            series: [
                                {
                                    name: 'Area Mode',
                                    type: 'pie',
                                    radius: [20, 100],
                                    center: ['50%', '50%'],
                                    roseType: 'area',
                                    itemStyle: {
                                        borderRadius: 5
                                    },
                                    data: f
                                }
                            ]
                        };
                        myChart.setOption(option);
                    })

            },
            zhexian() {
                axios.get("/pur/tongji")
                    .then(({data}) => {
                        const f = data.map(item => (item.name))
                        const c = data.map(item => (item.value))
                        console.log("============", f);
                        var myChart = echarts.init(document.getElementById("zhexian"));
                        option = {
                            title: {
                                text: '采购订单对比折线图',
                                subtext: 'Fake Data',
                                left: 'center'
                            },
                            xAxis: {
                                type: 'category',
                                data: f
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: c,
                                    type: 'line'
                                }
                            ]
                        };
                        myChart.setOption(option);
                    })

            },
            searchcount(){
                axios.get("/pur/searchlist")
                    .then(({data})=>{
                        this.count = data.data;
                    })
            },
            searchmax(){
                axios.get("/pur/max")
                    .then(({data})=>{
                        const accumulatedData = {};
                        // 遍历原始数据
                        data.data.forEach(item => {
                            // 使用项目名称作为键来获取当前累加的数量
                            const name = item.chaseName; // 假设每个项目都有一个'name'字段和一个'quantity'字段
                            const quantity = item.chaseNumber; // 假设每个项目的数量存储在'quantity'字段中
                            // 如果对象中没有这个键，则初始化数量为当前项目的数量
                            if (!accumulatedData[name]) {
                                accumulatedData[name] = quantity;
                            } else {
                                // 如果对象中已经有这个键，则将当前项目的数量加到已有的数量上
                                accumulatedData[name] += quantity;
                            }
                        });
                        // accumulatedData 现在包含了累加后的数据，你可以按需使用它
                        console.log(accumulatedData); // 打印累加后的数据到控制台

                        let maxValue = -Infinity;
                        let minValue = Infinity;
                        let maxValueName = '';
                        let minValueName = '';

                        for (const name in accumulatedData) {
                            const value = accumulatedData[name];
                            if (value > maxValue) {
                                maxValue = value;
                                maxValueName = name;
                            }
                            if (value < minValue) {
                                minValue = value;
                                minValueName = name;
                            }
                        }

                        this.maxValueName = maxValueName;
                        this.minValueName = minValueName;
                    })
                    .catch(error => {
                        // 处理请求错误
                        console.error("Error fetching data:", error);
                    });
            },
        },
        mounted() {
            this.yuan();
            this.zhexian();
            this.searchcount();
            this.searchmax();
        }
    });
</script>
</body>
</html>